<template>
  <dv-border-box-12 ref="devRef" class="tree_box" v-if="treeData.length">
    <el-input
      style="margin-bottom: 10px"
      placeholder="请输入"
      suffix-icon="el-icon-search"
      v-model="filterText"
      size="small"
    >
    </el-input>
    <div class="h-full">
      <el-tree
        :indent="6"
        :show-checkbox="false"
        :check-on-click-node="true"
        :check-strictly="true"
        class="filter_ree"
        :data="treeData"
        :props="defaultProps"
        default-expand-all
        accordion
        :filter-node-method="filterNode"
        highlight-current
        node-key="token"
        ref="tree"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <el-radio
            @input="val => changeRadio(val, data, node)"
            :value="deviceToken"
            :label="data.token"
            v-if="data.type === 4"
          >
            <!-- v-if="node.isLeaf" 最后一级 -->
            <span class="flex-x" v-if="data.status == 101">
              <!-- #F49F0B -->
              <img
                v-if="getSateIcon(data.status)"
                :src="getSateIcon(data.status)"
                style="width: 12px; height: 12px; margin-right: 2px"
                alt=""
              />
              <span
                :style="{
                  color: getSateColor(data.status),
                  fontSize: '15px'
                }"
              >
                {{ data.name }}</span
              >
            </span>
            <span v-else style="color: #fff;"> {{ data.name }}</span>
          </el-radio>
          <span v-else>
            <span> {{ data.name }}</span>
          </span>
        </span>
      </el-tree>
    </div>
  </dv-border-box-12>
</template>
<script>
import _ from "lodash";
// import { generateId } from "@/utils";
import { mixinOpenedKey } from "@/mixin/openedKey.js";
import { DEVICE_STATE } from "../../workshopOperation/constant";

export default {
  // 有bug 晚点改
  watch: {
    // 有bug 晚点改
    "$store.state.app.sidebar.opened": {
      handler: function(newData, oldData) {
        setTimeout(() => {
          this.$nextTick(() => {
            if (this.$refs.devRef) {
              this.$refs.devRef.initWH();
            }
          });
        }, 500);
      },
      immediate: true
    }
  },
  computed: {
    // 根据状态返回不同颜色
    getSateColor() {
      return function(state) {
        return DEVICE_STATE.find(item => item.value == state)?.color || "#fff";
      };
    },
    // 根据状态返回不同图标
    getSateIcon() {
      return function(state) {
        return DEVICE_STATE.find(item => item.value == state)?.imgUrl || "";
      };
    }
  },
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    deviceToken: {
      default: ""
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      check: "",
      showActive: "first",
      filterText: "",
      // checkedKey: "",
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  methods: {
    // // 树列表查询事件
    filterNode(value, data) {
      // console.log("data :>> ", data);
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    changeRadio(val, data, node) {
      console.log("node :>> ", node);
      // this.$emit("update:deviceToken", val);
      this.$emit("treeCheck", val, node);
    }
  }
};
</script>

<style lang="scss" scoped>
.tree_box {
  overflow: hidden;
  /deep/ .border-box-content {
    padding-bottom: 60px;
  }

  .el-tree-node:focus > .el-tree-node__content .el-tree-node__expand-icon {
    color: #00c0fa;
  }

  /deep/
    .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: inherit !important;
  }

  /* background-color: #081f63; */
  padding: 15px;
  height: 100%;
  overflow: hidden;

  /deep/ .el-input__inner {
    background-color: inherit;
    border: 1px solid #096a9f;
  }

  /deep/ .el-tree {
    background-color: inherit;
    color: #fff !important;

    .el-radio {
      display: flex;
      align-items: center;
    }

    .el-radio__label {
      // padding-left: 2px;
    }

    // 隐藏第一级的复选框
    .el-tree-node__content {
      .el-checkbox {
        display: none;
      }
    }

    .el-tree-node__children {
      .el-tree-node__content {
        .el-checkbox {
          display: inline-block;
        }
      }
    }

    .el-tree-node__content:hover {
      background-color: #010b47;
    }

    .el-tree-node:focus > .el-tree-node__content {
      background-color: #010b47;
    }
  }

  .filter_ree::-webkit-scrollbar {
    width: 6px;
    height: 10px;
  }

  .filter_ree::-webkit-scrollbar-track {
    background-color: inherit;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }

  .filter_ree::-webkit-scrollbar-thumb {
    background-color: #5dcbff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }

  ::-webkit-scrollbar {
    width: 4px !important;
  }

  .filter_ree::-webkit-scrollbar-corner {
    /* background-color: #5dcbff; */
    display: none;
  }

  .filter_ree {
    overflow: auto;
    /* height: calc(100vh - 150px) !important; */
    height: 100%;
  }

  .tab_box {
    position: relative;
  }

  .close-icon {
    font-size: 12px;
    position: absolute;
    right: 10px;
    top: 16px;
  }
}
</style>
